<template>
    <div>
        <!-- 首页 -->
        <!-- 上面的div -->
        <div class="back">
            <div class="back-left">
                <img src="../assets/shr.png" alt="" class="back-img" />
                <div class="left-z">
                    河南省新乡市辉县市
                </div>
                <div class="left-bottom">五龙山动物园</div>
                <div class="left-div">
                    <img src="../assets/search.png" alt="" class="left-img" />
                    <input type="text" placeholder="搜索" @click="sou" />
                </div>
            </div>
        </div>
        <!-- 顶部分类 -->
        <div class="list">
            <div class="list-child" @click="ticket">
                <img src="../assets/img17119018ac1efd538.png" alt="" />
                <div class=" ">
                    售票专区
                </div>
            </div>
            <div class="list-child">
                <img src="../assets/img17119118ac1f05620.png" alt="" />
                <div class="shou">
                    景区讲解
                </div>
            </div>
            <div class="list-child" @click="maps">
                <img src="../assets//img17119418ac1f12cf8.png" alt="" />
                <div class="shou">
                    景区地图
                </div>
            </div>
            <div class="list-child" @click="explain">
                <img src="../assets/img17119318ac1f109d0.png" alt="" />
                <div class="shou">
                    使用说明
                </div>
            </div>
            <div class="list-child" @click="foreshow">
                <img src="../assets/img17527618acec72400.png" alt="" />
                <div class="shou">
                    演出预告
                </div>
            </div>
        </div>
        <!-- 公告 -->
        <van-notice-bar left-icon="volume-o" :text="recommend[2].notice" />
        <!-- 游玩攻略 -->
        <div class="act">
            <img src="../assets/01.png" @click="Strategy_jump" alt="" class="act-img" />
            <div class="act-right">
                <img @click="activitys" src="../assets/02.png" alt="" />
                <img @click="ranking" src="../assets/03.png" alt="" />
            </div>
        </div>
        <!-- 推荐景区 -->
        <div class="tui">
            <div class="tui-left">
                <img src="../assets/huo.png" alt="" />
                <div class="left-zi">推荐景区</div>
            </div>
            <div class="tui-right">
                <div class="right-zi">
                    更多
                </div>
                <img src="../assets/right.png" alt="" />
            </div>
        </div>
        <!-- 推荐景区 -->
        <div class="pu">
            <div class="pu-one" v-for="(item, index) in recommend" :key="item.id"
                @click="Scenic_data(item, item.id, index)">
                <img :src="`https://wwz.jingyi.icu${item.img}`" alt="" class="one-img" />
                <div class="jie">
                    <div class="jie-top">{{ item.name }}</div>
                    <div class="jie-bottom">
                        <div class="jie-bottom_child">
                            <div>{{ item.score }}分 </div>
                            <div class="l">|</div>
                            <div> 评价{{ item.number }}</div>
                        </div>
                        <div class="div-div">
                            <img src="../assets/love.png" alt="" />
                            999+
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 推荐攻略 -->
        <div class="tui">
            <div class="tui-left">
                <img src="../assets/huo.png" alt="" />
                <div class="left-zi">推荐攻略</div>
            </div>
            <div class="tui-right">
                <div class="right-zi">
                    更多
                </div>
                <img src="../assets/right.png" alt="" />
            </div>
        </div>
        <!-- 推荐攻略 -->
        <div class="pb">
            <div class="pu_two" @click="detail(item.id, index, item)" v-for="(item, index) in Strategy" :key="item.id">
                <img :src="`https://wwz.jingyi.icu${item.img}`" alt="" class="pu_one-img" />
                <div class="pu-div">
                    <div class="pu-ping">
                        {{ item.title }}
                    </div>
                    <div class="pu-user">
                        <div class="user-left">
                            <img :src="`https://wwz.jingyi.icu${item.avatar}`" alt="" class="gh" />
                            <div>{{ item.name }}</div>
                        </div>
                        <div class="user-right">
                            <img src="../assets/love.png" alt="" class="df" />
                            <div>{{ item.like_num == null ? '8' : item.like_num }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="duo">没有更多了</div>
        <div class="child">
            <div class="child-child" onclick="home()">
                <img src="../assets/home1.png" alt="" class="child-child-img" />
                <div style="color: red;">首页</div>
            </div>
            <div class="child-child" @click="Strategy_jump">
                <img src="../assets/iii.svg" alt="" class="child-child-img" />
                <div>攻略</div>
            </div>
            <div class="child-child">
                <transition name="rocket">
                    <!-- <div class="bzcko_fei"></div> -->
                    <div class="backo" v-if="showRocket">
                        <!-- 这里原本可能有一些内容，比如火箭的图片 -->
                        <img src="../assets/xhj.png" @click="launchRocket" class="rockett" alt="Rocket">
                    </div>
                </transition>
                <img src="../assets/fa.png" alt="" class="child-child-img" />
                <div>发布</div>
            </div>
            <div class="child-child" @click="ranking">
                <img src="../assets/kkk.png" alt="" class="child-child-img" />
                <div>排行榜</div>
            </div>
            <div class="child-child" @click="my">
                <img src="../assets/my.png" alt="" class="child-child-img" />
                <div>我的</div>
            </div>
        </div>
        <!-- 定位 -->
        <div id="container"></div>
        <div class="info">
            <h4 id="status"></h4>
            <hr>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { NoticeBar } from 'vant';
// import { Scenic } from '../api/home'
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
// import axios from "axios";
import { Scenic } from "../api/home"
import { intro } from "../api/intro"
const showRocket = ref(true); // 控制火箭是否显示的变量  
// 推荐景区接口
const recommend = ref([])
const spot_list = ref([]);
Scenic().then(res => {
    console.log(res);
    recommend.value = res.data
    spot_list.value = res.data;
    console.log(recommend.value, '123');
})
// 攻略接口
const Strategy = ref([])
intro().then((res) => {
    console.log(res, '攻略接口')
    Strategy.value = res.data
    console.log(Strategy.value);
})

// 跳转到景区地图
const maps = () => {
    router.push({
        name: "map",
        query: {
            id: spot_list.value[2].id
        }
    });
    console.log(spot_list.value[2].id);
}
// 跳转到使用说明
const explain = () => {
    router.push({
        name: "illustrate",
    });
}
// 跳转到攻略
const Strategy_jump = () => {
    router.push({
        name: "Strategy",
    });
}
// 跳转到搜索页面
const sou = () => {
    router.push({
        name: "search",
    });
}
// 跳转到演出预告
const foreshow = () => {
    router.push({
        name: "perform",
        query: {
            id: spot_list.value[3].id
        }
    });
}
// 跳转到排行榜
const ranking = () => {
    router.push({
        name: "list",
    });
}
// 跳转到我的
const my = () => {
    router.push({
        name: "me",
    });
}
// 跳转到景区活动
const activitys = () => {
    console.log(spot_list.value[3].id);
    router.push({
        name: "activity",
        query: {
            id: spot_list.value[3].id
        }
    });
}
// 跳转到票务专区
const ticket = () => {
    router.push({
        name: "ticket",
        query: {
            id: spot_list.value[3].id
        }
    });
}
// 跳转到景区详情
const Scenic_data = (secID, index, item) => {
    router.push({
        name: "Scenic_Area_Details",
        query: {
            id: spot_list.value[2].id
        }
    });
    sessionStorage.setItem('secID', JSON.stringify(secID));
    sessionStorage.setItem('secdata', index);
    sessionStorage.setItem('secitem', item);
}
// 跳转到攻略详情
const detail = (Raider_ID, index, item) => {
    router.push({
        name: "Strategy_details"
    })
    console.log(Raider_ID);
    sessionStorage.setItem('Raider_ID', Raider_ID);
    sessionStorage.setItem('gldata', index);
    sessionStorage.setItem('rowitem', JSON.stringify(item));
}
// 定义方法  
const launchRocket = () => {
    // 开始动画  
    showRocket.value = false; // 通过改变数据触发过渡效果  
    // 延迟 1 秒后跳转至 Login 组件（注意：通常我们不会直接跳转到 .vue 文件，而是使用 Vue Router）  
    setTimeout(() => {
        router.push('/review')
        // 假设你使用了 Vue Router，这里的逻辑需要替换为你实际的导航逻辑  
        // 例如，你可以使用 router.push('/login')  
         // 假设你没有使用 Vue Router，你可能需要继续使用 window.location，但这并不是 Vue 的标准做法  
        // window.location.href = '/review'; // 注意这里通常是 URL 路径，而不是 .vue 文件  
    }, 1000); // 假设过渡效果在 1 秒内完成  
};
// 如果有需要，可以在这里添加生命周期钩子  
// 例如，onMounted 会在组件挂载后执行  
onMounted(() => {
    // 组件挂载后的代码  
});
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

/* 背景 */
.back {
    background-image: url("../assets/lkjhg.webp");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 240px;
}

/* 定义过渡效果的 CSS */
.rocket-enter-active,
.rocket-leave-active {
    transition: all 1s;
    /* 假设动画持续 1 秒 */
}

.rocket-enter,
.rocket-leave-to {
    /* 初始状态或结束状态，这里我们让火箭向上移动 */
    transform: translateY(-1300%);
    /* 注意这里可能需要调整，因为百分比通常基于元素本身的高度 */
    position: relative;
    /* 确保元素可以相对于其正常位置移动 */
}

.div-div {
    display: flex;
    align-items: center;
}

.van-notice-bar__wrap {
    position: static !important;
    position: static;
    display: flex;
    flex: 1;
    align-items: center;
    height: 100%;
    overflow: hidden;
}

.back-left {
    display: flex;
    flex-direction: column;
    width: 92%;
    margin-left: 4%;
    padding-top: 100px;
    justify-content: space-around;
    height: 100px;
    position: relative;
    top: -10px;
}

.back-img {
    width: 20px;
    height: 20px;
}

.back-left input {
    outline: none;
    border-radius: 5px;
    border-style: none;
    text-indent: 6.5px;
    font-size: 13px;
}

/* <!-- 上面的div --> */
.left-z {
    font-size: 20px;
    color: white;
    font-weight: bold;
}

.left-bottom {
    font-size: 12px;
    color: white;
}

.left-img {
    width: 18px;
    height: 18px;
}

.left-div {
    display: flex;
    background-color: white;
    border-radius: 5px;
    height: 26px;
    align-items: center;
    font-size: 18px;
    padding: 10px;
    margin-top: 7px;

}

/* <!-- 顶部分类 --> */
.list {
    width: 98%;
    margin-left: 1%;
    border-radius: 7px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: -26px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-shadow: 0px 1px 1px 0px rgba(229, 229, 229, 1);
}

.list img {
    width: 40px;
    height: 40px;
}

.list-child {
    display: flex;
    flex-direction: column;
    width: 20%;
    align-items: center;
}

body {
    background-color: #F0F8FF;
}

/* 分类样式 */
.shou {
    font-size: 12px;
    padding-top: 5px;
}

/* 公告 */
.announcement {
    width: 100%;
    /* background-color: #F8EBD9; */
    /* color: rgba(255, 195, 0, 1); */
    display: flex;
    align-items: center;
    text-indent: 10px;
    font-size: 12px;
    margin-top: 6.5px;
    height: 50px;
}

@keyframes madeng {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-140%);
    }
}

/* 游玩攻略 */
.act {
    margin-top: 5px;
    display: flex;
    justify-content: space-around;
    padding: 0 3px;
}

.act-img {
    width: 49%;
}

.act-right {
    width: 49%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.act-right img {
    width: 100%;
}

/* <!-- 推荐景区 --> */
.tui {
    display: flex;
    align-items: center;
    margin-top: 5px;
    background-color: #E2EEFD;
    padding-left: 6.5px;
    padding-top: 6.5px;
    padding-bottom: 6.5px;
    padding-right: 6.5px;
    justify-content: space-between;
}

.tui-left {
    align-items: center;
    display: flex;
}

.tui-right {
    display: flex;
    align-items: center;
    height: 20px;

    width: auto;
    justify-content: center;
    padding-left: 6.5px;
    border-radius: 1.5vh;
    background-color: white;
}

.tui-left img {
    width: 20px;
    height: 20px;
}

.right-zi {
    font-size: 11px;
}

.tui-right img {
    width: 15px;
    height: 15px;
}

.left-zi {
    padding-left: 0.5vh;
    font-size: 11px;
}

/* <!-- 推荐景区 --> */
.pu {
    margin-left: 2%;
    column-count: 2;
    column-gap: 0vh;
    padding-top: 6.5px;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* <!-- 推荐攻略 --> */
.pb {
    column-count: 2;
    column-gap: 0vh;
    padding-top: 10px;
    padding-left: 2%;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-bottom: 20vh;
}

.pu-one {
    direction: ltr;
    width: 96%;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    break-inside: avoid;
}

.pu-two {
    direction: ltr;
    width: 96%;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    break-inside: avoid;
}

.jie-bottom_child {
    width: 50%;
    display: flex;
}

.l {
    margin: 0 5px;
}

.one-img {
    width: 100%;
    /* height: 200px; */
    border-radius: 5px;
}

.two-img {
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    height: 25vh;
}

.jie-bottom {
    display: flex;
    justify-content: space-between;
    padding-left: 0.5vh;
    font-size: 11px;
    font-weight: 300;
    padding-right: 0.5vh;
    padding-top: 0.8vh;
}

.jie {
    display: flex;
    flex-direction: column;
    background-color: white;
    margin-top: -0.5vh;
    padding: 5px 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.jie-top {
    font-size: 14px;
    font-weight: 600;
}

.jie img {
    width: 12px;
    height: 12px;
}

.pu-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 95%;
    padding-top: 6.5px;
    padding-bottom: 6.5px;
    padding-right: 6.5px;
}

.user-left {
    display: flex;
    align-items: center;
}

.user-right {
    display: flex;
    font-size: 13px;
    align-items: center;
}

.gh {
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

.df {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}

.pu_one {
    width: 48%;
    flex-direction: column;
    display: flex;
    break-inside: avoid;
    flex-direction: column;
}

.pu_one-img {
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.pu-ping {
    font-size: 13px;
    padding-top: 6.5px;
}

.pu-div {
    display: flex;
    flex-direction: column;
    background-color: white;
    padding-left: 6.5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.user-left div {
    font-size: 10px;
    color: #828282;
    padding-left: 6.5px;
}

.pu_two {
    width: 96%;
    break-inside: avoid;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.two_img {
    width: 100%;
    border-radius: 5px;
}

.pu_five {
    width: 48%;
    break-inside: avoid;
    display: flex;
    flex-direction: column;
}

.pu_six {
    width: 48%;
    break-inside: avoid;
    display: flex;
    flex-direction: column;
}

.pu_four {
    display: flex;
    flex-direction: column;
    width: 48%;
    break-inside: avoid
}

.pu_three {
    width: 48%;
    display: flex;
    break-inside: avoid;
    flex-direction: column;

}

.duo {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    bottom: 13vh;
    justify-content: center;
}

.child {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    align-items: center;
    height: 8vh;
    background-color: white;
    justify-content: space-around;
    font-size: 12px;
}

.child-child {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.child-child-img {
    width: 20px;
    height: 20px;
}

.pu_et {
    width: 48%;
    break-inside: avoid;
    display: flex;
    flex-direction: column;
}

.pu_sen {
    width: 48%;
    break-inside: avoid;
    display: flex;
    flex-direction: column;
}

.rockett {
    width: 5vh;
    height: 5vh;
    z-index: 9999;

}

.backo {
    width: 8vh;
    height: 8vh;
    border-radius: 50%;
    margin-top: -5vh;
    position: absolute;
    box-shadow: 0px 0px 11px 0px rgba(229, 229, 229, 1);
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -5vh;
}
.bzcko_fei {
    width: 8vh;
    height: 8vh;
    border-radius: 50%;
    margin-top: -5vh;
    position: absolute;
    box-shadow: 0px 0px 11px 0px rgba(229, 229, 229, 1);
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -5vh;
}
/* 定位 */
#container {
    height: 0%;
}

.info {
    width: 23rem;
}
</style>